<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=yes" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>排班表</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<link rel="stylesheet" href="../common/css/common.css" />
		<link rel="stylesheet" href="css/doctor.css" />
		<style type="text/css">
			.van-row {
				height: 25px;
				line-height: 25px;
			}
			.van-col--8 {
				text-align: center;
			}
			.van-cell {
				padding-top: 0;
			}
			.van-button--info {
				background-color: #e22e30;
				border-color: #e22e30;
				font-size: 18px;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="id_container">
				<div class="doctor_left_title">
					<span class="doctor_left_title_border"></span>
					<span class="doctor_left_title_name">可预约时间</span>
					<span class="doctor_left_title_name_desc"
						>（说明：点击表格进行设置）</span
					>
				</div>
				<div class="doctor_box schedual_list">
					<van-row class="schedual_list_title">
						<van-col span="6">星期</van-col>
						<van-col span="6">上午</van-col>
						<van-col span="6">下午</van-col>
						<van-col span="6">夜间</van-col>
					</van-row>
					<van-row
						class="schedual_list_item"
						v-for="(item,index) in detail.outpatientInfos"
					>
						<van-col span="6">{{item.weekDay}}</van-col>
						<van-col span="6" @click="changeMState(item.outpatientDate,index)">
							<div v-if="item.morningStatus==0"></div>
							<div
								class="schedual_list_item_state"
								v-if="item.morningStatus==1"
							>
								<van-icon name="success" color="red" />
							</div>
						</van-col>
						<van-col span="6" @click="changeAState(item.outpatientDate,index)">
							<div v-if="item.afternoonStatus==0"></div>
							<div
								class="schedual_list_item_state"
								v-if="item.afternoonStatus==1"
							>
								<van-icon name="success" color="red" />
							</div>
						</van-col>
						<van-col span="6" @click="changeNState(item.outpatientDate,index)">
							<div v-if="item.nightStatus==0"></div>
							<div class="schedual_list_item_state" v-if="item.nightStatus==1">
								<van-icon name="success" color="red" />
							</div>
						</van-col>
					</van-row>
				</div>

				<div class="doctor_left_title">
					<span class="doctor_left_title_border"></span>
					<span class="doctor_left_title_name">服务内容</span>
				</div>
				<div class="doctor_box doctor_box_100">
					<van-field
						v-model="detail.serviceContent"
						rows="2"
						autosize
						type="textarea"
						maxlength="500"
						placeholder="请输入服务内容"
						show-word-limit
					/>
				</div>
				<div class="edit_doctorinfo">
					<van-button round type="info" block @click="handleEditSchedual"
						>确定</van-button
					>
				</div>
			</div>
			<link-index></link-index>
		</div>
	</body>
	<!-- 引入 rem -->
	<script src="../common/js/rem.js"></script>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../common/js/axios.min.js"></script>
	<script src="../base.js"></script>
	<script src="../common/js/url.min.js"></script>

	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
		} from '../common/js/api/vue3-axios-utils.js'

		import { linkIndex } from '../common/js/template/linkIndex.js'

		const PatientData = {
			data() {
				return {
					url: {
						getSchedual: '/201/04/2010401',
						editSchedual: '/201/04/2010402',
					},
					doctorId: '',
					detail: {},
					serviceContent: '',
				}
			},
			created() {
				this.doctorId = url('?id')
				this.init()
			},
			methods: {
				async init() {
					await this.handleGetSchedual()
				},
				handleGetSchedual() {
					getAction(spliceUrl(this.url.getSchedual), {
						doctorId: this.doctorId,
					}).then(res => {
						res = res.data
						console.log('handleGetSchedual', res)
						if (res.success) {
							for (var i = 0; i < res.result.outpatientInfos.length; i++) {
								res.result.outpatientInfos[i]['mnum'] =
									res.result.outpatientInfos[i].morningStatus
								res.result.outpatientInfos[i]['anum'] =
									res.result.outpatientInfos[i].afternoonStatus
								res.result.outpatientInfos[i]['nnum'] =
									res.result.outpatientInfos[i].nightStatus
							}
							this.detail = res.result
							console.log('detail', this.detail)
						}
					})
				},
				changeMState(date, index) {
					console.log('mindex', index)
					if (date == this.detail.outpatientInfos[index].outpatientDate) {
						this.detail.outpatientInfos[index].mnum += 1
					}
					if (this.detail.outpatientInfos[index].mnum % 2 == 0) {
						this.detail.outpatientInfos[index].morningStatus = 0
					} else {
						this.detail.outpatientInfos[index].morningStatus = 1
					}
					this.detail = this.detail
				},
				changeAState(date, index) {
					console.log('aindex', index)
					if (date == this.detail.outpatientInfos[index].outpatientDate) {
						this.detail.outpatientInfos[index].anum += 1
					}
					if (this.detail.outpatientInfos[index].anum % 2 == 0) {
						this.detail.outpatientInfos[index].afternoonStatus = 0
					} else {
						this.detail.outpatientInfos[index].afternoonStatus = 1
					}
					this.detail = this.detail
				},
				changeNState(date, index) {
					console.log('nindex', index)
					if (date == this.detail.outpatientInfos[index].outpatientDate) {
						this.detail.outpatientInfos[index].nnum += 1
					}
					if (this.detail.outpatientInfos[index].nnum % 2 == 0) {
						this.detail.outpatientInfos[index].nightStatus = 0
					} else {
						this.detail.outpatientInfos[index].nightStatus = 1
					}
					this.detail = this.detail
				},
				handleEditSchedual() {
					postAction(spliceUrl(this.url.editSchedual), {
						doctorId: this.doctorId,
						outpatientInfos: this.detail.outpatientInfos,
						serviceContent: this.detail.serviceContent,
					}).then(res => {
						res = res.data
						console.log('EditSchedual', res)
						if (res.success) {
							this.$toast.success({
								message: '编辑成功',
								duration: 300,
								onClose: function () {
									window.location.href = './doctorStudio.html'
								},
							})
						}
					})
				},
			},
			components: {
				linkIndex: linkIndex,
			},
		}

		const app = Vue.createApp(PatientData)

		app.use(vant)

		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload)

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");

		app.mount('#app')
	</script>
</html>
